<div id="content">
	<div class="row s_page_title">
		<sa-big-breadcrumbs [items]="['设备安装管理','设备待维修记录[客户]']" icon="fa fa-wrench" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>
	
	<sa-widgets-grid>
		<div class="s_table">
			<div sa-widget [editbutton]="false" color="darken" class="clearfix">
				<header><span class="widget-icon"> <i class="fa fa-table"></i> </span><h2>设备待维修记录[客户]</h2></header>
				<div>
					<div class="widget-body no-padding">
						<div class="page-header clearfix s_table_opreation">
							<div class="left page-header-btn" style="width: calc(100% - 220px);">
								<sa-company-tree-car companyTreeId="companyTree"  (companySelected)="companySelected($event)"></sa-company-tree-car>										
								<!-- <div class="top_module">
									<span class="module_text">用户名</span>
									<div class="s_hover_box">
										<select   class="select2"  id="userNameSelect2" style="width: 150px;">
											<option value=''></option>
										</select>
										<div class="s_del_icon" (click)='delUserName()'>x</div>
									</div>
								</div> -->
								<div class="top_module top_module_box" style="min-width: auto;">
									<span class="top_module_label module_text">故障类型</span>
									<select name="" class="top_module_select" [(ngModel)]="faultTypeName" style="min-width: 110px;">
										<option value="">全部</option>
										<option value="" *ngFor="let item of faultTypeArr" [value]="item.text">{{item.text}}</option>
									</select>
								</div>
								<div class="top_module top_module_box" style="min-width: auto;" *ngIf="factoryLimit">
									<span class="top_module_label module_text">进厂限制</span>
									<select name="" class="top_module_select" [(ngModel)]="isPush" style="min-width: 110px;">
										<option value="2">全部</option>
										<option value="" *ngFor="let item of isPushTypeArr" [value]="item.type">{{item.text}}</option>
									</select>
								</div>
								<!--<div class="top_module top_module_box" style="min-width: auto;">
									<span class="top_module_label module_text">故障状态</span>
									<select name="" class="top_module_select" [(ngModel)]="repairedStatus" style="min-width: 110px;">
										<option value="">全部</option>
										<option value="0">待维修</option>
										<option value="1">已维修</option>
									</select>
								</div>-->
								<div class="top_module top_module_box" style="min-width: auto;">
									<span class="top_module_label module_text">时间类型</span>
									<select name="" class="top_module_select" [(ngModel)]="dateType" style="min-width: 110px;">
										<option value="1">创建时间</option>
										<!-- <option value="2">维修时间</option> -->
									</select>
								</div>
								<div class="top_module top_module_box" style="min-width: auto;">
									<span class="top_module_label module_text">排序</span>
									<select name="" class="top_module_select" [(ngModel)]="sortType" style="min-width: 110px;">
										<option value="1">升序</option>
										<option value="2">降序</option>
									</select>
								</div>
								<div class="selectDate top_module">
									<div class="input-daterange input-group s_selected_time_box s_hover_box">
										<input type="text" [(ngModel)]='startTime' class="form-control s_selected_time" id="datetimepicker1"  autocomplete="off" placeholder="选择开始时间"/>
										<span class="s_selected_time_spe">至</span>
										<input type="text" [(ngModel)]='endTime' class="form-control s_selected_time" id="datetimepicker2"  autocomplete="off" placeholder="选择结束时间"/>
										<div class="s_del_icon" (click)='del_date()'>x</div>
									</div>
								</div>
								<button class="btn btn-primary" (click)="table_search()">查询</button>
								<!-- <button type="button" class="btn btn-primary" (click)="carWaitingRepairTop(waitingRepairModal)">车辆排名</button> -->
								<button type="button" class="btn btn-primary" (click)="exportData()" *ngIf="resourceExport">导出</button>
							</div>
							<div class="right top-search">
								<input type="text" [(ngModel)]="searchKey" (change)="table_search()" class="search-input" placeholder="车牌号码、所属公司...">
								<span class="top-search-box">
							        <button class="top-search-btn" type="button" (click)="table_search()"> <i class="fa fa-search"></i></button>
							    </span>
							</div>
						</div>
						<div class="table_scroll">
							<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
								<thead>
									<tr>
										<th>设备ID</th>
										<th>车牌号码</th>
										<th>所属公司</th>
										<th>故障类型</th>
										<!-- <th>故障来源</th> -->
										<th>故障时间</th>
										<th>故障现象</th>
										<!-- <th>维修指导</th> -->
										<th>故障状态</th>
										<!-- <th>维修记录</th> -->
										<!-- <th>维修人员</th> -->
										<!-- <th>维修总结</th> -->
										<!-- <th>GPS天线</th> -->
										<!-- <th>GSM天线 </th> -->
										<th>司机电话</th>
										<th>备注</th>
										<th>录入时间</th>
										<!-- <th>维修时间</th> -->
										<th>进厂限制</th>
										<th>最后编辑</th>
										<!-- <th>录入人员</th> -->
										<!-- <th>图片</th> -->
										<!-- <th>最后拨打人</th> -->
										<!-- <th>最后拨打时间</th> -->
										<!-- <th>最后通话时长</th> -->
										<!-- <th>总拨打次数</th> -->
									</tr>
								</thead>
								<tbody>
									<tr *ngFor="let row of tableData" >
										<td>{{row.deviceId}}</td>
										<td>{{row.carNumber}}</td>
										<td>{{row.companyName}}</td>
										<td>{{row.faultTypeName}}</td>
										<!-- <td>{{row.updateSource}}</td> -->
										<td>{{row.faultTime}}</td>
										<td>{{row.faultPhenomenon}}</td>
										<!-- <td>{{row.repairedGuide}}</td> -->
										<td>
											<span *ngIf='row.repairedStatus=="0"' class="orange">待维修</span> 
											<span *ngIf='row.repairedStatus=="1"' class="green">已维修</span>
										</td>
										<!-- <td>{{row.repairedRecords}}</td> -->
										<!-- <td>{{row.repairedUser}}</td> -->
										<!-- <td>{{row.repairedConclusion}}</td> -->
										<!-- <td>{{row.gpsAntenna}}</td> -->
										<!-- <td>{{row.gsmAntenna}}</td> -->
										<td>{{row.driverPhone}}</td>
										<td>{{row.remark}}</td>
										<td>{{row.createTime}}</td>
										<!-- <td>{{row.repairedTime}}</td> -->
										<td>
											<span *ngIf="row.isPush=='1'" >限制</span>
											<span *ngIf="row.isPush=='0'" >不限制</span>
										</td>
										<td>{{row.lastUpdateTime}}</td>
										<!-- <td>{{row.creater}}</td>
										<td>
											<span *ngIf="row.paths">
												<button type="button" (click)="open_img(row,ImgModal)" *ngIf="row.paths.length > 0 && row.paths">查看</button>
											</span>
										</td>
										<td>{{row.callUser?row.callUser:''}}</td>
										<td>{{row.callUser?row.callTime:''}}</td>
										<td>{{row.callUser?row.callDuration:''}}</td>
										<td>{{row.callUser?row.callCount:''}}</td> -->
									</tr>
								</tbody>
							</table>
						</div>
						<div class="table-fix clearfix">
							<paginator [totalRecords]="totalCount"
						           [rows]="pageSize"
						           [currentPage]="curPage - 1"
						           (onPageChange)="paginate($event)">
							</paginator>
							<button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</sa-widgets-grid>
	<!-- 待维修车辆TOP20   弹窗-->
	<section bsModal #waitingRepairModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width: 780px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" (click)="waitingRepairClose(waitingRepairModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>     
					<h4 class="modal-title">车辆故障TOP{{topNumber}}
						<div class="btn_ground" style="min-width: 160px;float: right;margin-right: 60px;">
							<button class="btn_color" [ngClass]="{'active':curBtn === '1'}" (click)="topDateSelect('1')">今天</button>
							<button class="btn_color" [ngClass]="{'active':curBtn === '2'}" (click)="topDateSelect('2')">近一周</button>
							<button class="btn_color" [ngClass]="{'active':curBtn === '3'}" (click)="topDateSelect('3')">当月</button>
						</div>
						<div class="page-header page-header-btn" style="float: right;margin: 0;padding: 0;border: none;">
							<div class="top_module top_module_box right" style="margin: 0;">
								<span class="top_module_label module_text">TOP{{topNumber}}排名</span>
								<select name="" class="top_module_select" [(ngModel)]="topNumber" (change)="topNumberChange()" style="min-width: 32px;">
									<option value="10">10</option>
									<option value="20">20</option>
									<option value="30">30</option>
									<option value="40">40</option>
									<option value="50">50</option>
								</select>
							</div>
						</div>
					</h4>
				</div>
				<div class="modal-body">
					<div class="row form-horizontal">
						<div style="border: 1px solid #ddd;border-radius: 4px;padding: 12px;" *ngIf="selectedCompanyName||userName||faultTypeName||repairedStatus||searchKey||startTime||endTime">
							<ul class="row">
								<li style="font-size: 14px;font-weight: bold;margin-bottom: 4px;">筛选条件</li>
								<li class="col-sm-4" *ngIf="selectedCompanyName"><span>公司名称：</span><span>{{selectedCompanyName}}</span></li>
								<li class="col-sm-4" *ngIf="userName"><span>用户名：</span><span>{{userName}}</span></li>
								<li class="col-sm-4" *ngIf="faultTypeName"><span>故障类型：</span><span>{{faultTypeName}}</span></li>
								<li class="col-sm-4" *ngIf="repairedStatus"><span>故障状态：</span>
									<span *ngIf='repairedStatus=="0"'>待维修</span>
									<span *ngIf='repairedStatus=="1"'>已维修</span>
								</li>
								<li class="col-sm-4" *ngIf="startTime"><span>开始时间：</span><span>{{startTime}}</span></li>
								<li class="col-sm-4" *ngIf="endTime"><span>结束时间：</span><span>{{endTime}}</span></li>
								<li class="col-sm-4" *ngIf="searchKey"><span>关键字：</span><span>{{searchKey}}</span></li>
								<li class="col-sm-4" *ngIf="topNumber"><span>top排名：</span><span>前{{topNumber}}名</span></li>
							</ul>
						</div>
						<table *ngIf="waitingRepairCarTopList.length > 0" class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
							<tr>
								<th>排名</th>
								<th>车牌号码</th>
								<th>问题[个]</th>
							</tr>
							<tr *ngFor="let item of waitingRepairCarTopList;let i = index">
								<td>{{i+1}}</td>
								<td>{{item.text}}</td>
								<td>{{item.value}}</td>
							</tr>
						</table>
						<div class="note" *ngIf="waitingRepairCarTopList.length == 0">暂无数据</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- 待维修车辆TOP20 end-->
	<!-- 图片查看   弹窗-->
	<section bsModal #ImgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" (click)="imgClose(ImgModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>     
					<h4 class="modal-title">图片</h4>
				</div>
				<div class="modal-body">
					<div class="row form-horizontal">
						<div class="img_desc">
							<div class="big_img_box">
								<img [src]="modal.active" alt="图片" class="picture"/>
							</div>
							<ul class="small_img_box">
								<li class="pre_arrow arrow" [ngClass]="{notAllow:modal.activeNum == 0}">
									<img src="assets/img/zuojiantou.png" (click)="change_img_left()" />
								</li>
								<li class="small_img" *ngFor="let item of modal.picture;let i = index" [ngClass]="{active:modal.activeNum == i}">
									<img [src]="item" (mouseover)="switch_img(i)" class="img" />
								</li>
								<li class="next_arrow arrow" [ngClass]="{notAllow:modal.activeNum == modal.picture.length-1}">
									<img src="assets/img/youjiantou.png" (click)="change_img_right($event)"/>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</div>
<style type="text/css">
.btn_ground .active{
	color: #1A6DDD;
	font-size: 16px;
	font-weight: bold;
}
.btn_color{
	background-color: #fff;
	margin-right: 12px;
	height: 24px;
	line-height: 24px;
	border: none;
	min-width: 46px;
	text-decoration: underline;
}
.btn_color:hover{
	color: #1A6DDD;
	font-size: 16px;
	font-weight: bold;
}

/* 弹出层 */
.small_img_box{
	text-align: center;
	padding: 12px 0;
}
.picture{
	min-height: 100px;
	width: 100%;
	height: auto;
}
.img_desc .arrow{
	display: inline-block;
	cursor: pointer;
	vertical-align: top;
	height: 80px;
	line-height: 80px;
	padding: 0 15px;
}
.img_desc .arrow.notAllow{
	cursor: not-allowed;
}
.small_img{
	width: 80px;
	height: 80px;
	overflow: hidden;
	display: inline-block;
	border:2px solid #ccc;
}
.small_img.active{
	border:2px solid #1A6DDD;
}
.small_img:hover{
	border:2px solid #1A6DDD;
}
.small_img .img{
	width: 100%;
	height: auto;
}


</style>